import React, { Component } from "react";
import { Layout, Menu, Dropdown, Avatar } from 'antd';
import { withRouter } from 'react-router';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  LogoutOutlined
} from '@ant-design/icons';
const { Header } = Layout;
class Com extends Component{
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const menu = (
      <Menu>
        <Menu.Item key="0">
          <div>超级管理员</div>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="3">
          <div onClick = { ()=> {
            localStorage.removeItem('isLogin');
            this.props.history.push('/login')

          }} > <LogoutOutlined /> &nbsp;&nbsp;退出</div>
        </Menu.Item>
      </Menu>
    );
    return(
      <Header className="site-layout-background" style={{ padding: 0 }}>
          {/* {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: this.toggle,
          })} */}
          {
            this.state.collapsed ? 
            <MenuUnfoldOutlined  className= "trigger" onClick={this.toggle} />
            :
            <MenuFoldOutlined className= "trigger" onClick={this.toggle} />
          }
            <div style={ { float: 'right', margin: '0px 16px' }}>
          <Dropdown overlay={menu} trigger={['click']}>
            <Avatar size="large" icon={<UserOutlined />} /> 
          </Dropdown>
        </div>
        </Header>
    )
  }
}
export default withRouter(Com)